<template>
  <div class="second">
    <div class="font1">男女比例</div>
    <div class="font2"></div>
    <div class="is">
      <div class="font3">
        <img src="../../images/man.png" style="width: 80px; height: 84px" />
      </div>
      <div class="font4">
        <img src="../../images/woman.png" style="width: 80px; height: 84px" />
      </div>
    </div>
    <div class="echarts" ref="zexian"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let zexian = ref()
onMounted(() => {
  let myEcharts = echarts.init(zexian.value)

  let data = [
    { name: '男', weight: 6000 },
    { name: '女', weight: 4000 },
  ].map((item) => {
    return {
      name: item.name,
      value: Math.floor(item.weight * 1000) / 1000,
    }
  })
  let option = {
    animation: true,
    grid: {
      top: '15%',
      bottom: '25%',
      left: '15%',
    },
    tooltip: {
      show: true,
      backgroundColor: '#fff',
      borderColor: '#ddd',
      borderWidth: 1,
      formatter: (p) => {
        let txtCon =
          "<div style='text-align:left'>" +
          // `<div style="background:${p.color};width:15px;height:15px;borderRadius:50%"></div>` +
          `<span style='color:${p.color}'>` +
          p.name +
          `</span><br /><span style=color:${p.color}> ` +
          p.percent +
          '%</span></div>'
        return txtCon
      },
      textStyle: {
        rich: {
          a: {
            fontSize: 28,
            background: '#e4ff00',
            with: '10',
          },
          b: {
            fontSize: 20,
            color: '#e4ff00',
            padding: [0, 0, 14, 0],
          },
          c: {
            fontSize: 20,
            color: '#fff',
            padding: [5, 0],
          },
        },
      },
    },
    series: {
      type: 'pie',
      radius: ['70%', '30%'],
      data: data,
      color: [
        '#3C97F2',
        '#44CC86',
        '#9BE2E8',
        '#6DC8EC',
        '#6E8CDE',
        '#EB5A49',
        '#FB9E02',
        '#F7DE2C',
        '#FF7081',
        '#F7DE2C',
        '#3C97F2',
        '#EB5A49',
        '#44CC86',
        '#9BE2E8',
        '#FB9E02',
        '#6DC8EC',
        '#6E8CDE',
        '#FF7081',
      ],
      labelLine: {
        show: true,
      },
      label: {
        show: true,
        // position:'inner',
        formatter: '{d}%',
      },
    },
  }

  myEcharts.setOption(option)
})
</script>
<style scoped lang="scss">
.second {
  margin-top: 10px;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: cover;

  .font1 {
    margin-top: 10px;
    color: white;
    font-size: 20px;
  }

  .font2 {
    margin-top: 10px;
    width: 68px;
    height: 7px;
    background: url(../../images/dataScreen-title.png) no-repeat;
    background-size: cover;
  }

  .is {
    display: flex;
    justify-content: center;
    height: 100px;
    width: 100%;

    .font3 {
      margin: 20px 20px 0px 0px;
    }

    .font4 {
      margin: 20px 0px 20px 0px;
    }
  }

  .echarts {
    margin-left: 150px;
    height: 200px;
    width: 200px;
  }
}
</style>
